<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<!-- 设置不缓存 -->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<link rel="stylesheet" type="text/css" href="http://www.gsmn.com.cn/datacenterapply/datacenter/layui/css/layui.css">
<script type="text/javascript" src="http://www.gsmn.com.cn/datacenterapply/datacenter/layui/layui.js"></script>
<script type="text/javascript" src="http://www.gsmn.com.cn/datacenterapply/datacenter/js/echarts.js"></script>
<script type="text/javascript" src="http://www.gsmn.com.cn/datacenterapply/datacenter/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.gsmn.com.cn/datacenterapply/datacenter/js/common.js"></script>
<link rel="stylesheet" href="http://www.gsmn.com.cn/datacenterapply/datacenter/css/comm_iframe.css"/>
<script type="text/javascript" src="http://www.gsmn.com.cn/eportalapply/js/My97/WdatePicker.js"></script>

</head>
<body>
<div style="overflow: hidden;">
<div id="report_box" ></div>
</div>
<script type="text/javascript">
<!--
var option ;
var myChart;
var dataZoom;
var category;
$(function () {
	setReportBox("#report_box");
   	//下面是加载echarts报表
    init();
	try{
		window.parent.setiframe($("body").height());
	}catch(e){}
});
     
     
function init(){
    // 基于准备好的dom，初始化echarts实例
       	myChart = echarts.init(document.getElementById('report_box'));
        // 使用刚指定的配置项和数据显示图表。
        //myChart.setOption(option);
	   	getdata(myChart);
	   	iframe_change_channel();
}



function getdata(myChart){
	var url ="http://www.gsmn.com.cn/eportal/ui?struts.portlet.action=/portlet/xhdata!getXHData.action&moduleId=7263660d59e34834a8efb826a60d30f7";
	var CityID ="11";
	
	$.ajax({   
	     url:url,   
	     type:'post',   
	     data:{CityID:CityID},
	     async : false, //默认为true 异步   
	     error:function(){   
	        alert('error');   
	     },   
	     success:function(data){
	    	var tmpdata=parseJson($.trim(data));
	    	var cityName = tmpdata.cityName;
	    	$(".dq").html(cityName);
	    	data=parseJson(tmpdata.dataJson);
	 		category = data.category;
	 		var mseries = data.data;
	 		var type ="line";
 			var series=eval('('+"[]"+')');
	 		var legend=eval('('+"[]"+')');
	 		var tempMax = 0;
	 		var tempMin = 99999;
	 		
	 		for(var key in mseries){
	 			var mydata = new Object();
	 			mydata.name =key;
	 			mydata.type =type;
	 			mydata.data=mseries[key];
	 			if(key=="涨跌"){
	 				mydata.xAxisIndex=1;
	 				mydata.yAxisIndex=1;
	 				mydata.type ="bar";
	 				mydata.barMaxWidth=10
	 			}else{
	 				for(var xdata in mydata.data){
	 					if(mydata.data[xdata]>tempMax){
	 						tempMax = mydata.data[xdata];
	 					}
	 					if(mydata.data[xdata]<tempMin){
	 						tempMin = mydata.data[xdata];
	 					}
	 				}
	 			}
	 			legend.push(key);
	 			//添加最大最小值
	 			mydata.markPoint= {
	 				symbol :"pin",
	                data: [
	                       {type: 'max', name: '最大值'},
	                       {type: 'min', name: '最小值'}
	                   ]
	               };
	 			mydata.markLine= {  
                    data: [  
                           {type: 'average', name: '平均值'}  
                       ]  
                   } ; 
	 			series.push(mydata);
	 			
	 		}
	 		option={
	 				title: {
	 	                text: "",
	 	                x:'center',
	 	                textStyle:{
	 	                	fontSize:14,
	 	                	color:'#286bc5',
	 	                	fontWeight:'bold'
	 	                }

	 	            },
	 	          tooltip: {
	 	        	  trigger: 'axis',
	 	              formatter: function(params) {
	 	                  var index = params[0].dataIndex;
	 	                  //当前鼠标划过的现货价格
	 	                  var xhjg = series[0].data[index];
	 	                  //当前鼠标划过的涨跌
	 	                  var zd = series[1].data[index];
	 	                  //当前鼠标划过的当前日期
	 	                  var date = params[0].name;
	 	                  $(".sj span").html(date);
	 	                  $(".xhjg span").html(xhjg);
	 	                  $(".zd span").html(zd);
	 	                  return date + '<br/>' + '现货价格' + ': ' + xhjg+'<br/>'+'涨跌' + ': ' +zd;
	 	              },
	 	              /**axisPointer:[{
	 	              	type:'line'
	 	              }],*/
	 	          },
	 	           grid: [{
	 	              left: 50,
	 	              right: 50,
	 	              height: '45%',
	 	              top: '9%',
	 	          }, {
	 	              left: 50,
	 	              right: 50,
	 	              top: '63%',
	 	              height: '25%'
	 	          }],
	 	           dataZoom: [
	 	                     {
	 	                         show: true,
	 	                         realtime: true,
	 	                         start: 90,
	 	                         end: 100,
	 	                         xAxisIndex: [0, 1],
	 	                       	 bottom:"1%"
	 	                       	 
	 	                     },
	 	                     {
	 	                         type: 'inside',
	 	                         realtime: true,
	 	                         start: 90,
	 	                         end: 100,
	 	                         xAxisIndex: [0, 1]
	 	                    	 
	 	                     }
	 	                 ],
	 	            legend: {     //图例组件
	 	                data:legend,
	 	                bottom:'0%',
	 	               	left:'2%'
	 	            },
	 	            xAxis:[{       //直角坐标系 grid 中的 x 轴
	 	                type: 'category',
	 	                boundaryGap: false,
	 	               	axisLine: {onZero: true},
	 	                data: category,
	 	               	splitLine:{show:false},
	 	               	axisTick:{show:true},
	 	              	axisLabel :{
	 	            	 margin:16
	 	              }
	 	            },
	 	           	{       //直角坐标系 grid 中的 x 轴
	 	                type: 'category',
	 	               	gridIndex: 1,
	 	                boundaryGap: false,
	 	               	axisLine: {onZero: true},
	 	                data: category,
	 	               	position: 'top',
	 	               	axisLabel:{show:false},
	 	               	axisTick:{show:false}
	 	            }],
	 	            yAxis:[ {       //直角坐标系 grid 中的 y 轴
	 	                type: 'value',
	 	                min:tempMin,
	 	                max:tempMax,
	 	                splitLine: {
    						lineStyle: {
        					color: ['#e5e5e5']
    						}
						},
	 	                splitArea : {
	 	               		show : true,
	 	               	}
	 	            },{       //直角坐标系 grid 中的 y 轴
	 	                type: 'value',
	 	               	inverse:false,
	 	               	gridIndex: 1,
	 	               	splitLine: {
    						lineStyle: {
        					color: ['#e5e5e5']
    						}
						},
	 	               	splitArea : {
	 	               		show : true,
	 	               		/**areaStyle:{
	 	               			color: ['#ececec','#f1f1f1']
	 	               		}*/
	 	               	}
	 	            }],
	 				series:series
	 			}
	 			
	 		option.color=['#f76c5d','#35a9ff','#ffb980','#b6a2de','#2ec7c9'];
	 		myChart.setOption(option);
	 		qj();

	 		
	     }
	 });
}

/**
 * 通过数据index，获取当前鼠标划过的现货价格和涨跌信息
 */
function getDataByIndex(index,series){
	
}

function change(){
	var startdate = $("#startdate").val();
	var enddate = $("#enddate").val();
	var _firstdate = category[0];
	var _enddate = category[category.length-1];
	if(startdate!=""&&enddate!=""){
		if(startdate<enddate){
			while(!checkdate(startdate)){
				if(startdate<=_firstdate){
					startdate = _firstdate;
				}else{
					startdate=GetTomorrow(startdate);	
				}
			}
			while(!checkdate(enddate)){
				if(enddate>=_enddate){
					enddate = _enddate;
				}else{
					enddate=GetYesterday(enddate);	
				}
				
			}
			//console.log("startdate="+startdate);
			//console.log("enddate="+enddate);
			if(checkdate(startdate)&&checkdate(enddate)){
				var dataZoom = [
				                {
				                    show: true,
				                    realtime: true,
				                    startValue:startdate,
				                    endValue:enddate,
				                  	bottom:"5%"
				                },
				                {
				                    type: 'inside',
				                    startValue:startdate,
				                    endValue:enddate,
				                    realtime: true
				                    
				                }];

				option.dataZoom=dataZoom;
				myChart.setOption(option);
			}else{
				alert("起始日期或终止日期不存在数据！");
			}
		}else{
			alert("起始日期不能小于终止日期！");
		}
	}
}


//期间
function qj(type,num){
	var json =  getqj(type,num);
	json =parseJson(json);
	var dataZoom = [
	                {
	                    show: true,
	                    realtime: true,
	                    startValue:json.startdate,
	                    endValue:json.enddate,
	                  	bottom:"5%"
	                },
	                {
	                    type: 'inside',
	                    startValue:json.startdate,
	                    endValue:json.enddate,
	                    realtime: true,
	                    
	                }];

	option.dataZoom=dataZoom;
	myChart.setOption(option);
	$("#startdate").val(json.startdate);
	$("#enddate").val(json.enddate);
}

function getqj(type,num){
	var stardate=category[0];
	var count = category.length;
	var enddate = category[count-1];
	var myDate=new Date(enddate);
	var year =myDate.getFullYear();
	var month =formatNum(myDate.getMonth()+1);
	var day = formatNum(myDate.getDate());
	//alert(year+";"+formatNum(month,2)+";"+formatNum(day,2));
	if(typeof(type)=="undefined"&&typeof(type)=="undefined"){
		stardate =category[0];
	}else if("year"==type){
		year=year-num;
		var _startdate = year+"-"+month+"-"+day;
		while(!checkdate(_startdate)&&_startdate>stardate){
			_startdate = GetYesterday(_startdate);
		}
		stardate=_startdate;
	}
	else if("month"==type){
		var _startdate =  GetYesterMonth(enddate,num);
		while(!checkdate(_startdate)&&_startdate>stardate){
			_startdate = GetYesterday(_startdate);
		}
		stardate=_startdate;
	}else if("day"==type){
		stardate = category[count-num];
	}

	return {"startdate":stardate,"enddate":enddate}
	
}
//获取某日的前一天
function GetYesterday(mdate){   
    var today=new Date(mdate);
    var yesterday_milliseconds=today.getTime()-1000*60*60*24;
     
    var yesterday=new Date();      
    yesterday.setTime(yesterday_milliseconds);      
        
    var strYear=yesterday.getFullYear();   
    var strDay=formatNum(yesterday.getDate());   
    var strMonth=formatNum(yesterday.getMonth()+1);   
   
    return strYesterday=strYear+"-"+strMonth+"-"+strDay;   
   
}

//获取某日的后一天
function GetTomorrow(mdate){   
    var today=new Date(mdate);
    var tomorrow_milliseconds=today.getTime()+1000*60*60*24;
     
    var tomorrow=new Date();      
    tomorrow.setTime(tomorrow_milliseconds);      
        
    var strYear=tomorrow.getFullYear();   
    var strDay=formatNum(tomorrow.getDate());   
    var strMonth=formatNum(tomorrow.getMonth()+1);   
   
    return strYear+"-"+strMonth+"-"+strDay;   
   
}

//获取上个月
function GetYesterMonth(mdate,num){
	var date =new Date(mdate);
	var daysInMonth = new Array([ 0 ], [ 31 ], [ 28 ], [ 31 ], [ 30 ],
				[ 31 ], [ 30 ], [ 31 ], [ 31 ], [ 30 ], [ 31 ], [ 30 ], [ 31 ]);
		var strYear = date.getFullYear();
		var strDay = date.getDate();
		var strMonth = date.getMonth() + 1;
		if (strYear % 4 == 0 && strYear % 100 != 0) {
			daysInMonth[2] = 29;
		}
// 		if (strMonth - num == 0) {
// 			strYear -= 1;
// 			strMonth = 12;
// 		}else 
		if(strMonth - num <= 0){
			strYear -= 1;
			strMonth = 12 -(num-strMonth)
		}else {
			strMonth -= num;
		}
		strDay = daysInMonth[strMonth] >= strDay ? strDay
				: daysInMonth[strMonth];
		if (strMonth < 10) {
			strMonth = "0" + strMonth;
		}
		if (strDay < 10) {
			strDay = "0" + strDay;
		}
		datastr = strYear + "-" + strMonth + "-" + strDay;
		return datastr;
}

	//格式两位数，补零
	function formatNum(num) {
		var length = 2;
		return (Array(length).join('0') + num).slice(-length);
	}

	//检测是否存在
	function checkdate(date) {
		for ( var index in category) {
			if ($.trim(date) == category[index])
				return true;
		}
		return false;
	}

	function getDataZoom(start, end) {
		return [ {
			show : true,
			realtime : true,
			start : start,
			end : end,
			bottom : "5%"
		}, {
			type : 'inside',
			realtime : true,
			start : start,
			end : end
		} ]
	}

//-->
</script>

</body>
</html>
